<template>
  <view class="container">
    <su-status-bar />

    <view class="nav-box">
      <!-- <view class="nav-title">
        <view>个人中心</view>
      </view> -->
      <uni-nav-bar
        style="width: 100%"
        backgroundColor="transparent"
        :border="false"
        color="#fff"
        right-icon="headphones"
        @clickRight="onChat"
      >
        <view class="nav-title">个人中心</view>
      </uni-nav-bar>

      <view class="userInfo" :style="customStyle">
        <!-- 头像 -->
        <view>
          <image
            class="avatar"
            :src="userInfo.avatar"
            mode="aspectFill"
            @click.stop="toUserInfo"
          ></image>
        </view>
        <!-- name -->
        <view class="userDetal">
          <view class="left-box">
            <view>
              <view class="username" @click.stop="toUserInfo">
                <view style="margin-bottom: 10rpx">{{ userInfo.username }}</view>
                <!--  <view style="font-weight: normal; display: flex; align-items: center">
              <view>ID: {{ userInfo.id }}</view>
            </view> -->
              </view>
              <view class="identity-box">
                <image class="medal" src="@/static/images/VIP 1.png" mode=""></image>
                <view class="identity">
                  <view class="user-identity">
                    {{ getIdentity(userInfo.userIdentity) }}
                    <text v-if="userInfo.promotionAmbassador == 1" @click="showEquity">
                      / 推广大使
                    </text>
                  </view>
                </view>
              </view>
            </view>
            <view class="qiehuan" @click="asasasasa"> 切换账号 </view>
          </view>
        </view>
      </view>

      <view class="assets-box" :style="customStyle">
        <view class="assets-item" @click="toIncomeLog('SURPLUS')">
          <view class="val">{{ balanceInfo.surplus || 0 }}</view>
          <view class="name">余额</view>
        </view>
        <view class="line"> </view>
        <view class="assets-item" @click="toIncomeLog('INTEGRAL')">
          <view class="val">{{ balanceInfo.integral || 0 }}</view>
          <view class="name">消费值</view>
        </view>
        <view class="line"> </view>
        <view class="assets-item" @click="toAssetTransfer('ORIGINAL_ENERGY')">
          <view class="val">{{
            balanceInfo.originalEnergy + balanceInfo.hzwyOriginalEnergy || 0
          }}</view>
          <view class="name">贡献值</view>
        </view>
        <view class="line"> </view>
        <view class="assets-item" @click="toAssetTransfer('GREEN_ENERGY')">
          <view class="val">{{ balanceInfo.greenEnergy || 0 }}</view>
          <view class="name">商品卡</view>
        </view>
      </view>
    </view>

    <view class="cart-box">
      <view class="cart">
        <view class="img-bg">
          <img class="top-bg-clr" src="../../static/img/bg.png" alt="" />
        </view>
        <view class="cart-text">
          <view class="cart-title">零售商</view>
          <view class="cart-text-item">当前成长值3200</view>
          <view class="cart-text-item">升级代理商还需1800</view>
        </view>
        <view class="pros">
          <view>零售商</view>
          <view class="progress-box">
            <progress :percent="pgList" activeColor="#8700bc" stroke-width="6" />
          </view>
          <view>代理商</view>
        </view>
      </view>
    </view>

    <view class="feature-box" :style="customStyle">
      <view class="feature-title">我的订单</view>
      <s-block-item type="UserOrder" />
    </view>

    <!-- <view class="assets-more" :style="customStyle">
      <view class="item-left" @click="toEnergyPool">
        <view class="title" style="color: #fff">能量池</view>
        <view class="value1" style="color: #fff">{{ poolInfo.energyTotal || 0 }}</view>
        <view class="name" style="color: #fff">总投入</view>
        <image class="icon1" src="@/static/images/nlc-L.png" mode=""></image>
      </view>
      <view class="item-right" @click="toIncomeLog('CONTRIBUTION')">
        <view class="title" style="color: #fff">贡献值</view>
        <view class="value2" style="color: #fff">{{ balanceInfo.contribution || 0 }}</view>
        <view class="name" style="color: #fff"
          >{{ getIdentityByContribution(balanceInfo.contribution || 0) }}
        </view>
        <image class="icon1" src="@/static/images/gxz-L.png" mode=""></image>
      </view>
    </view> -->
    <view class="feature-box1" :style="customStyle">
      <view class="feature-title">我的服务</view>

      <view class="container-list">
        <uni-list :border="false">
          <uni-list-item
            title="团队"
            showArrow
            :border="true"
            class="list-border"
            to="/pages/me/team"
          >
            <template v-slot:header>
              <view>
                <image class="icon" src="@/static/images/tuandui.png" mode="aspectFit"></image>
              </view>
            </template>
          </uni-list-item>

          <uni-list-item
            title="推广二维码"
            showArrow
            :border="true"
            class="list-border"
            to="/pages/me/invitation"
          >
            <template v-slot:header>
              <view>
                <image class="icon" src="@/static/images/tuiguang.png" mode="aspectFit"></image>
              </view>
            </template>
          </uni-list-item>
          <!-- <uni-list-item
            title="银行卡"
            showArrow
            clickable
            :border="true"
            class="list-border"
            @click="toBankCard"
          >
            <template v-slot:header>
              <view>
                <image class="icon" src="@/static/images/bankCard.png" mode="aspectFit"></image>
              </view>
            </template>
          </uni-list-item>
          <uni-list-item
            title="支付账户"
            showArrow
            clickable
            :border="true"
            class="list-border"
            @click="toPayAcc"
          >
            <template v-slot:header>
              <view>
                <image class="icon" src="@/static/images/payAccIcon.png" mode="aspectFit"></image>
              </view>
            </template>
          </uni-list-item> -->
          <uni-list-item
            title="客服"
            showArrow
            clickable
            :border="true"
            class="list-border"
            @tap="
              sheep.$router.go('/pages/user/address/list', {
                title: '客服',
              })
            "
          >
            <template v-slot:header>
              <view>
                <image class="icon" src="@/static/images/tuiguang.png" mode="aspectFit"></image>
              </view>
            </template>
          </uni-list-item>
          <uni-list-item
            title="设置"
            showArrow
            clickable
            :border="true"
            class="list-border"
            @tap="
              sheep.$router.go('/pages/public/setting', {
                title: '设置',
              })
            "
          >
            <template v-slot:header>
              <view>
                <image class="icon" src="@/static/images/shezhi.png" mode="aspectFit"></image>
              </view>
            </template>
          </uni-list-item>
        </uni-list>
      </view>
    </view>
    <!-- 		<uni-popup ref="accountDialog" type="dialog" :animation="false">
			<uni-popup-dialog ref="inputClose" mode="base" title="提示" content="当前用户未开户,是否进行开户？"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup> -->
    <view class="bj1">
      <image
        style="width: 200rpx; height: 200rpx"
        mode="aspectFill"
        src="../../static/images/nlc-L.png"
      ></image>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onUpdated, onMounted } from 'vue';
import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import assetApi from '@/sheep/api/member/asset';
import transferApi from '@/sheep/api/member/transfer';
// const userInfo = sheep.$store('user').userInfo || {}
onLoad(() => {
  console.log(123456);
});
// const accountDialog = ref(null)

const pgList = ref(70);

const toTeam = () => {
  uni.navigateTo({
    url: '/pages/me/team',
  });
};

const asasasasa = () => {
  uni.navigateTo({
    url: '/pages/user/switch-user',
  });
};

const swichUser = () => {};

const toSetting = () => {
  uni.navigateTo({
    url: '/pages/public/setting',
  });
};
const toIncomeLog = (type) => {
  if (type == 'SURPLUS') {
    //获取用户信息toBankCardtoBankCard
    let userInfo = uni.getStorageSync('userInfo');

    // if (!userInfo.oidUserNo) {
    // 	// if (userInfo.value.id == "1817840189498839042") {
    // 	// accountDialog.value.open()
    // 	// }
    // 	return
    // }
  }
  uni.navigateTo({
    url: '/pages/me/Income_log?type=' + type,
  });
};
const toBankCard = () => {
  //获取用户信息toBankCardtoBankCard
  let userInfo = uni.getStorageSync('userInfo');

  // if (!userInfo.oidUserNo) {
  // 	// if (userInfo.value.id == "1817840189498839042") {
  // 	// accountDialog.value.open()
  // 	// }
  // 	return
  // }

  uni.navigateTo({
    url: '/pages/me/bankCard',
  });
};
const toPayAcc = () => {
  uni.navigateTo({
    url: '/pages/me/components/verifyPhone',
  });
};
const toAssetTransfer = (type) => {
  if (type == 'ORIGINAL_ENERGY' && balanceInfo.value.hzwyOriginalEnergy > 0) {
    uni.navigateTo({
      url: '/pages/me/asset_transfer?type=' + ['ORIGINAL_ENERGY', 'HZWY_ORIGINAL_ENERGY'],
    });
  } else {
    uni.navigateTo({
      url: '/pages/me/asset_transfer?type=' + type,
    });
  }
};
const toEnergyPool = () => {
  uni.navigateTo({
    url: '/pages/me/components/energyPool',
  });
};
const onChat = () => {
  sheep.$router.go('/pages/chat/index');
};

const customStyle = ref('');
const getElementStyle = () => {
  const systemInfo = uni.getSystemInfoSync();

  let windowWidth = systemInfo.windowWidth;

  let styleObj = {
    width: windowWidth - 2 * 10 + 'px',
  };
  customStyle.value = styleObj;
};
//获取我的身份
const getIdentity = (userIdentity) => {
  switch (userIdentity) {
    case 0:
      return '普通会员';
      break;
    case 1:
      return '零售商';
      break;
    case 2:
      return '代理商';
      break;
    case 3:
      return '批发商';
      break;
    case 4:
      return '推广大使';
      break;
    default:
      return '';
      break;
  }
};
const poolInfo = ref({});
const getEnergyPoolInfo = async () => {
  let res = await transferApi.getEnergypoolDetail();
  console.log('获取能量池信息', res);
  if (res.code == 0) {
    poolInfo.value = res.data;
  }
};
//根据贡献值匹配身份
const getIdentityByContribution = (contribution) => {
  if (contribution >= 1500 && contribution < 5000) {
    return '数字零售商';
  } else if (contribution >= 5000 && contribution < 17000) {
    return '数字代理商';
  } else if (contribution >= 17000) {
    return '数字批发商';
  } else {
    return '';
  }
};
const balanceInfo = ref({});
//获取余额
const getBalance = async () => {
  let res = await assetApi.getAssetDetails();
  console.log('获取余额', res);
  // setTimeout(() => {
  if (res.code == 0) {
    balanceInfo.value = res.data;
  }
};

function copyText() {
  console.log(123);
  const text = userInfo.value.id;
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({
        title: '复制成功ID',
        icon: 'none',
        duration: 2000,
      });
    },
    fail: () => {
      uni.showToast({
        title: '复制失败',
        icon: 'none',
        duration: 2000,
      });
    },
  });
}

const toUserInfo = () => {
  uni.navigateTo({
    url: '/pages/user/info',
  });
};
const showEquity = () => {
  // if (userIdentity == 4) {
  uni.navigateTo({
    url: '/pages/me/components/equityView',
  });
  // }
};
const dialogInputConfirm = () => {
  // accountDialog.value.close()
  uni.navigateTo({
    url: '/pages/me/components/bankAcount',
  });
};

const userInfo = ref({});
onShow(() => {
  //获取用户信息
  userInfo.value = uni.getStorageSync('userInfo');
  // console.log('获取用户信息', userInfo.value);

  getElementStyle();
  getBalance();
  getEnergyPoolInfo();
  sheep.$store('user').updateUserData();
  setTimeout(() => {
    if (!userInfo.value.oidUserNo) {
      // if (userInfo.value.id == "1817840189498839042") {
      // accountDialog.value.open()
      // }
    }
  }, 200);
});

// onMounted(() => {

// 	//获取用户信息
// 	userInfo.value = uni.getStorageSync('userInfo')
// 	console.log('onMounted');
// 	if (!userInfo.value.oidUserNo) {
// 		// if (userInfo.value.id == "1817840189498839042") {
// 		accountDialog.value.open()
// 		// }

// 	}

// })
onUpdated(() => {
  console.log('组件已更新');
});
onPullDownRefresh(async () => {
  //获取用户信息
  userInfo.value = uni.getStorageSync('userInfo');
  getElementStyle();
  getEnergyPoolInfo();
  await getBalance();
  await sheep.$store('user').updateUserData();
  uni.stopPullDownRefresh();
});
</script>

<style lang="scss" scoped>
page {
  background-color: #f6f6fa;
  // height: 100%;
}

uni-page-body {
  height: auto;
}

.container {
  display: flex;
  flex-direction: column;
  background-color: #f6f6fa;
  align-items: center;
  background-image: url('@/static/images/me-bj.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  .bj1 {
    position: absolute;
    top: 100rpx;
    right: 0;
  }
}

.container-list {
  width: 100%;
}

.list-border {
  width: 100%;
}

.icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
}

.nav-box {
  width: 100vw;
  // height: calc(100vw * 300.0 / 375);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  // background-image: url('@/static/images/me_top_bg.png');
  background-size: cover;
  /* 让背景图铺满并保持比例 */
  background-position: bottom;
  /* 背景图居中显示 */
  background-repeat: no-repeat;

  /* 避免背景图重复 */
  .nav-title {
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    flex: 1;
  }

  .userInfo {
    display: flex;
    // align-items: center;
    // margin-top: 25rpx;
    position: relative;

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin: 0rpx 20rpx 10rpx 0rpx;
    }

    .userDetal {
      display: flex;
      flex-direction: column;
      // align-items: center;
      // text-align: center;
      // width: 100%;
      .left-box {
        display: flex;
        justify-content: space-between;
        width: 610rpx;
        .qiehuan {
          height: 35rpx;
          padding: 4rpx 8rpx;
          margin-left: 340rpx;
          background: linear-gradient(to left, #5ccbe4, #487dfd);
          color: #fff;
          border-radius: 20rpx 0 0 20rpx;
          font-size: 20rpx;
          // margin-top: 40rpx;
        }
      }

      .username {
        font-size: 30rpx;
        font-weight: 550;
        color: #000;
        margin-top: 10rpx;
      }

      .identity-box {
        display: flex;
        text-align: center;
        align-items: center;
        color: #fffffe;
        font-size: 14rpx;
        position: relative;
        bottom: 0;

        .identity {
          width: 160rpx;
          // text-align: center;
          background-color: #69c765;
          border-radius: 20rpx;
        }

        // .identity-box {
        //   display: flex;
        //   align-items: center;
        //   color: #fffffe;
        //   font-size: 14rpx;
        //   position: absolute;
        //   bottom: 0;
        //   // left: -20rpx;

        // .identity {
        //   width: 140rpx;
        //   text-align: center;
        //   // display: flex;
        //   align-items: center;
        //   padding: 4rpx 8rpx;
        //   border-radius: 100rpx;
        //   // background: linear-gradient(to right, #f18d80, #ec3319);
        //   background-color: #69c765;
        //   .user-identity {
        //     color: #fff;
        //   }
      }

      /* 从左到右的渐变 */
      .medal {
        position: absolute;
        // left: -10rpx;
        width: 42rpx;
        height: 42rpx;
      }

      .equity {
        // display: flex;
        // align-items: center;
        // color: #FFFFFE;
        // font-size: 18rpx;
        // position: absolute;
        // bottom: 0;
        // left: -20rpx;
        width: 100rpx;
        margin-left: 5px;
        padding: 4rpx 8rpx;
        border-radius: 100rpx;
        background: linear-gradient(to right, #f18d80, #ec3319);
        // background-color: #69c765;
      }
    }
  }

  .assets-box {
    margin-top: 25rpx;
    // width: 710rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    // margin-top: 40rpx;
    // background: #fff;
    padding: 25rpx 0;
    border-radius: 25rpx;
    margin-bottom: 25rpx;

    .line {
      width: 2rpx;
      background-color: #5e5d5d;
      min-height: 44rpx;
      font-weight: 400;
    }

    .assets-item {
      text-align: center;
      font-size: 26rpx;
      color: #ffffff;
      line-height: 1.3;

      .val {
        font-weight: 550;
        font-size: 32rpx;
        color: #434646;
      }

      .name {
        color: #000;
        margin-top: 10rpx;
      }
    }
  }

  .nav-bg {
    width: 100vw;
    // height: calc(100vw *200.0 / 375);
    position: absolute;
    top: 0;
    // z-index: -10;
  }
}

.cart-box {
  .cart {
    position: relative;
    .img-bg {
      .top-bg-clr {
        border-radius: 20rpx;
        background: linear-gradient(to bottom left, #7362f2, #edb8f2, #c4bbff, #aa9afe, #997af1);
      }
    }
    .cart-text {
      position: absolute;
      top: 50rpx;
      padding: 0 46rpx;
      .cart-title {
        font-family: 'Times New Roman';
        color: #fff;
        font-size: 40rpx;
        margin-bottom: 10rpx;
      }
      .cart-text-item {
        color: #eae3fd;
        font-size: 20rpx;
      }
    }
    .pros {
      position: absolute;
      display: flex;
      align-items: center;
      bottom: 20rpx;
      padding: 0 46rpx;
      font-size: 20rpx;
      color: #fff;
      .progress-box {
        width: 450rpx;
        margin: 10rpx 6rpx;
      }
    }
  }
}

.feature-box {
  // margin: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  // background-color: #ffffff;
  overflow: hidden;

  // position: absolute;
  // bottom: 0;
  // left: 50%;
  // transform: translate(-50%, 10%);

  .feature-title {
    font-size: 28rpx;
    font-weight: 550;
    margin: 10rpx 20rpx 30rpx 20rpx;
  }

  .feature-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 4列等宽 */
    // grid-template-rows: repeat(4, 1fr);
    /* 4行等高 */
    gap: 20rpx;

    /* 网格项之间的间距 */
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      image {
        width: 40rpx;
        height: 40rpx;
      }

      .text {
        text-align: center;
        font-size: 26rpx;
        margin: 10rpx 0;
        // font-weight: 550;
      }
    }
  }
}

.assets-more {
  margin-top: 25rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;

  .item-left,
  .item-right {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 10rpx 0 10rpx 20rpx;
    box-sizing: border-box;
    position: relative;

    .icon1 {
      width: 110rpx;
      height: 110rpx;
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .title {
      font-size: 28rpx;
      font-weight: 550;
    }

    .value1 {
      font-size: 32rpx;
      font-weight: 550;
      color: #1275ec;
      margin-top: 20rpx;
    }

    .value2 {
      font-size: 32rpx;
      font-weight: 550;
      color: #ed4a35;
      margin-top: 20rpx;
    }

    .name {
      font-size: 24rpx;
      font-weight: lighter;
      margin-top: 10rpx;
    }
  }

  .item-left {
    background: linear-gradient(36deg, #24aec2 16%, #8bdfdc 96%);
  }

  .item-right {
    background: linear-gradient(44deg, #950f16 34%, #bc3239 93%);
  }
}

.feature-box1 {
  margin: 20rpx 0;
  // margin: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  // background-color: #ffffff;
  overflow: hidden;

  .feature-title {
    font-size: 28rpx;
    font-weight: 550;
    margin: 10rpx 20rpx 30rpx 20rpx;
  }

  .feature-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 4列等宽 */
    // grid-template-rows: repeat(4, 1fr);
    /* 4行等高 */
    gap: 20rpx;

    /* 网格项之间的间距 */
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      image {
        width: 40rpx;
        height: 40rpx;
      }

      .text {
        text-align: center;
        font-size: 26rpx;
        margin: 10rpx 0;
        // font-weight: 550;
      }
    }
  }
}
</style>